<template>
	<div class="fx-list-cell-select-item" @click="onCellClick">
		<div v-show="!isEdit" class="fx-ellipsis fx-cursor"><slot>{{cellText}}</slot></div>
		<w-validate ref="validate">
			<w-select
				v-show="isEdit"
				ref="cell-select"
				v-model="currentInputValue"
				:optionlist="selectOptionList"
				:disabled="disabled"
				:popper-append-to-body="false"
				:filterKeys="filterKeys"
				poperClass="cell-select-item-poper"
				class="cell-select-input"
				@blur="onBlur"
				@change="onSelectChange"
				@on-select-enter="onSelectEnter"
			>
				<template slot-scope="{ optionlist }">
					<el-option
						v-for="item in optionlist"
						:key="item.id"
						:label="item.code"
						:value="item.id"
						class="cell-select__option fx-ellipsis"
					>
						<span class="cell-select__option-left fx-ellipsis" :title="item.code">{{ item.code }}</span>
						<span class="cell-select__option-right fx-ellipsis" :title="item.name">{{ item.name }}</span>
					</el-option>
				</template>
			</w-select>
		</w-validate>
	</div>
</template>
<script>
import cellMixin from '../mixins/fxListCell.js'
const SEARCH_PROPS = ['name', 'code', 'pinYin', 'pinYinList', 'spec']
export default {
	name: 'fx-list-cell-select-item',
	mixins: [cellMixin],
	props: {
		isEdit: Boolean,
		cellText: null,
		value: null,
		stop: Boolean,
		selectOptionList: {
			type: Array,
			default: () => {
				return []
			}
		},
		disabled: Boolean,
		asycnChange: Function,
		filterKeys: {
			type: Array,
			default: () => {
				return SEARCH_PROPS
			}
		}
	},
	data () {
		return {
			currentInputValue: ''
		}
	},
	created () {
		this.initValidate({
			showValidate: this.showValidate,
			clearValidate: this.clearValidate,
			setFocus: this.focus
		})
	},
	watch: {
		value: {
			immediate: true,
			handler (val) {
				this.currentInputValue = val
			}
		}
	},
	methods: {
		showValidate (message) {
			this.$refs.validate.show(message)
			this.focus()
		},
		clearValidate () {
			this.$refs.validate.clear()
		},
		focus () {
			this.$refs['cell-select'].focus()
		},
		onBlur () {
			this.$refs.validate.clear()
		},
		onCellClick () {
			if (this.stop) {
				event.stopPropagation()
			}
			this.$emit('click', this.row, this.rowIndex)
		},
		onSelectChange (selectId) {
			const item = this.selectOptionList.find(item => {
				return item.id === selectId
			})
			typeof this.asycnChange === 'function' ? this.asycnChange(item, this.row) : this.$emit('on-change', item, this.row)
		},
		onSelectEnter (event, selectItem) {
			this.$fxUtils.fxDebounce(200).then(() => {
				if (typeof this.asycnChange === 'function') {
					this.asycnChange(selectItem, this.row).then(() => {
						if (typeof this.$listeners['on-select-enter'] === 'function') {
							this.$emit('on-select-enter', this.row, this.rowIndex, selectItem)
						} else {
							this.cellEnter(event)
						}
					})
				} else {
					if (typeof this.$listeners['on-select-enter'] === 'function') {
						this.$emit('on-select-enter', this.row, this.rowIndex, selectItem)
					} else {
						this.cellEnter(event)
					}
				}
			})
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '~$assets/stylus/varsty.styl'
.fx-list-cell-item {
	.cell-select-input {
		width: 100%
	}
}
.cell-select__option {
	width: 300px
	display: flex
	&-left {
		flex: 1
	}
	&-right {
		flex: 1
		text-align: right
	}
}
</style>
